<template>
    <div class="person">
        <h2>姓名：{{ people.name }}</h2>
        <h2>年龄：{{ people.age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePeople">修改人</button>
    </div>
</template>

<script setup lang="ts" name="Person">
import {ref,watch} from 'vue'
    //data
    let people = ref({
        name:"zhang-san",
        age:18
    })
    //function
    function changeName(){
                people.value.name +="~"
            }
    function changeAge(){
                people.value.age +=1
            }
    function changePeople(){
        people.value = {
            name:"li-si",
            age:17
        }
    }
    //watch，参1是被监视的对象，参2是回调函数，参3是配置的对象（deep:true,immediate:true等等）
    watch(people,(newValue,oldValue)=>{
        console.log(people.value,newValue,oldValue)
    },{deep:true})
</script>

    
<style>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button {
        margin: 0 5px;
    }
    ul li {
        font-size: 20px;
    }
</style>